<template>
  <van-tabbar 
    v-model="tabbarActive" 
    active-color="#f00" 
    inactive-color="#666"
    @change="onChangeFn"
    >
    <van-tabbar-item icon="home-o" to='/'>
      <span>首页</span>
      <template #icon="props">
        <img :src="props.active ? footerIcon_1.active : footerIcon_1.inactive" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item icon="apps-o" to='category'>分类</van-tabbar-item>
    <van-tabbar-item icon="friends-o">发现</van-tabbar-item>
    <van-tabbar-item icon="cart-o" to="shoppingCart" :badge="shoppingStepperVal">购物车</van-tabbar-item>
    <van-tabbar-item icon="manager-o" to="personal">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>

  import { ref, onMounted, nextTick } from 'vue'
  import requestFn from '@/utils/https';
  // 导航栏，切换的索引
  let tabbarActive = ref(0);
  const msg = ref('footer底部导航栏')

  // 购物车中的商品数量
  const shoppingStepperVal = ref(0);
  // 页面刚打开的时候，从mysql中加载商品的数量
  const getStepperNum = () => {
    requestFn({
      url: '/mysql_getShoppingGoodsInfo',
      method: 'get',
    }).then( res => {
      // console.log(res.data)
      shoppingStepperVal.value = res.data.num
    })



    // requestFn({
    //   url: '/mysql_getStepperNum',
    //   method: 'get',
    // }).then( res => {
    //   // console.log(res)
    //   shoppingStepperVal.value = res.data[0].num
    // })
  }

  onMounted(() => {
    // console.log( typeof localStorage.getItem('switchTabVal') )
    let _v = localStorage.getItem('switchTabVal')
    tabbarActive.value = Number( _v )

    // 页面刚打开的时候，从mysql中加载商品的数量
    getStepperNum()
  })

  const onChangeFn = (inx) => {
    // console.log(inx);
    localStorage.setItem('switchTabVal', inx)
  }

  const footerIcon_1 = {
    active: 'https://res.vmallres.com//uomcdn/CN/cms/202202/655C627E76D597D20ACAE2FFFE05A943.png',
    inactive: 'https://res.vmallres.com//uomcdn/CN/cms/202105/3F3570287DBE1F6B7DB01175AB00320D.png',
  }

  // 子组件的事件
  const sonFn = () => {
    // nextTick，把回调推迟到下一个DOM更新周期之后。在一些数据更新之后等DOM更新之后立即执行。
    nextTick(() => {
      // console.log('子组件的方法')
      getStepperNum()
    })
  }

  defineExpose({
    sonFn
  })

</script>

